<template>
   <div class="nav">
        <router-link to="/" exact>推荐音乐</router-link>
        <router-link to="/list">热歌榜</router-link>
        <router-link to="/search">搜索</router-link>
   </div>
</template>
   
<script>
   export default {}
</script>

<style scoped>
    .nav{
        width: 100%;
        height: .8rem;
        background: #fff;
        font-size: .32rem;
        display: flex;
        align-items: center;
        justify-content: space-around;
        box-shadow: 0 1px 3px rgba(0,0,0,.1);
    }
    .nav a{
        color: #333;
        text-decoration: none;
        height: 100%;
        display: flex;
        align-items: center;
        border-bottom: .06rem solid transparent;
    }
    .nav a.activeLink{
        color: #dd001b;
        border-bottom-color: #dd001b;
    }
</style>